import {
  Box,
  Flex,
  HStack,
  IconButton,
  Text,
  Tooltip,
  useClipboard,
  useColorModeValue,
} from '@chakra-ui/react';
import { useState } from 'react';
// import { FiHeart } from 'react-icons/fi';
import { useTranslation } from 'react-i18next';
import { BiDislike, BiLike } from 'react-icons/bi';
import { RiFileCopy2Line } from 'react-icons/ri';

import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';

import { setNegativePromptTags, setPromptTags } from '../../store/tagSlice';

export interface TagType {
  key: string;
  zh: string;
  img?: string;
  sub?: string;
  desc?: string;
  id?: number | string;
}

const showByHover = false;
const TagDisplayItemCard = (props: { tag: TagType }) => {
  const { promptTags, negativePromptTags } = useAppSelector(
    (store) => store.tag
  );
  const dispatch = useAppDispatch();
  const isSelectedToPrompt = !!promptTags.find((i) => i.key === props.tag.key);
  const isSelectedToNegativePrompt = !!negativePromptTags.find(
    (i) => i.key === props.tag.key
  );
  const { t } = useTranslation();
  const borderC = useColorModeValue('#6c9da6', '#4f6e73');
  const n_borderC = useColorModeValue('#c97f7f', '#634b4b');
  const prompt_bg = useColorModeValue(
    'rgba(50, 50, 50, 0.1)',
    'rgba(255, 255, 255, 0.1)'
  );

  const border = isSelectedToPrompt
    ? borderC
    : isSelectedToNegativePrompt
    ? n_borderC
    : 'transparent';

  const { key, zh } = props.tag;
  const { onCopy: onPromptCopy, hasCopied: promptHasCopied } =
    useClipboard(key);

  const [isHovered, setIsHovered] = useState<boolean>(false);

  const handleMouseOver = () => setIsHovered(true);

  const handleMouseOut = () => setIsHovered(false);

  const addToPrompt = () => {
    if (!isSelectedToPrompt) {
      if (isSelectedToNegativePrompt) {
        dispatch(
          setNegativePromptTags(
            negativePromptTags.filter((i) => i.key !== props.tag.key)
          )
        );
      }
      dispatch(setPromptTags(promptTags.concat({ key, weight: 0 })));
    }
  };

  const addToNegativePrompt = () => {
    if (!isSelectedToNegativePrompt) {
      if (isSelectedToPrompt) {
        dispatch(
          setPromptTags(promptTags.filter((i) => i.key !== props.tag.key))
        );
      }
      dispatch(
        setNegativePromptTags(negativePromptTags.concat({ key, weight: 0 }))
      );
    }
  };

  const renderButtons = () => {
    return (
      <HStack spacing={1} display="flex" justify="flex-end" alignItems="end">
        {promptHasCopied ? (
          <p>Copied!</p>
        ) : (
          <Tooltip label={t('profile.copyPrompt')} hasArrow placement="top">
            <IconButton
              color="gary.700"
              aria-label=""
              icon={<RiFileCopy2Line />}
              size="xs"
              onClick={onPromptCopy}
              fontSize={20}
            />
          </Tooltip>
        )}

        <Tooltip label={t('tag.addToPrompt')} hasArrow placement="top">
          <IconButton
            color="gary.700"
            aria-label=""
            icon={<BiLike />}
            size="xs"
            onClick={addToPrompt}
            fontSize={20}
          />
        </Tooltip>
        <Tooltip label={t('tag.addToNegativePrompt')} hasArrow placement="top">
          <IconButton
            color="gary.700"
            aria-label=""
            icon={<BiDislike />}
            size="xs"
            onClick={addToNegativePrompt}
            fontSize={20}
          />
        </Tooltip>
        {/* <Tooltip label={t('tag.addToPrompt')} hasArrow placement="top">
          <IconButton
            color="gary.700"
            aria-label={''}
            icon={<FiHeart />}
            size="xs"
            onClick={onPromptCopy}
            fontSize={20}
          />
        </Tooltip> */}
      </HStack>
    );
  };

  return (
    <Flex
      w="auto"
      direction="column"
      bg={prompt_bg}
      mx="1"
      mb="2"
      h="max-content"
      borderRadius="base"
      position="relative"
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}
      userSelect="none"
      border={`2px solid ${border}`}
    >
      <Flex p="4" direction="column">
        <Text fontWeight="600">{zh}</Text>
        <Text fontSize="sm">{key}</Text>
        <Box pt="4">{renderButtons()}</Box>
      </Flex>

      {isHovered && showByHover && (
        <Box
          position="absolute"
          rounded="md"
          w="full"
          h="full"
          bg="blackAlpha.300"
          p="2"
        >
          {renderButtons()}
        </Box>
      )}
    </Flex>
  );
};

export default TagDisplayItemCard;
